<template>
   <div class="goods-body">
       <!-- 抢购+价格 -->
       <div class="buy">
           <!-- 左侧 -->
           <div class="price">
               <span>73</span>
               <span>元</span>
               <span>门市价:75元</span>
           </div>
           <!-- 右侧 -->
           <router-link :to="{path:'/order'}" tag="div" class="buy-btn">立即抢购</router-link>
       </div>
       <!-- 服务列表 -->
       <div class="server">
           <ul>
               <li v-for="item in serverList" :key="item.title">
                   <i v-bind:class="item.class"></i>
                   {{item.title}}
               </li>
           </ul>
       </div>
       <!-- 商家信息 -->
       <div class="store-message">
           <!-- 上--商家信息标题 -->
           <div class="top">商家信息</div>
           <!-- 下--商家详细信息 -->
           <div class="bottom">
               <!-- 左侧布局 -->
               <div class="message-left">
                   <div>五谷香自主涮烤火锅</div>
                   <div>长安区青年主题酒店南10米</div>
                   <div>
                       <i class="iconfont iconlocation"></i>
                       <span>离我最近</span>
                   </div>
               </div>
               <!-- 右侧布局 -->
               <div class="message-right">
                   <i class="iconfont icondianhua1"></i>
               </div>
           </div>
       </div>
   </div>
</template>
   
<script>
   export default {
       data () {
           return {
               serverList:[
                   {title:'支持随时退款',class:'iconfont icontui2'},
                   {title:'支持过期自动退',class:'iconfont icondui-copy'},
                   {title:'已售180938',class:'iconfont iconrenwu'}
               ]
           }
       }
   }
</script>
   
<style scoped lang="less">
    .goods-body{
        overflow: hidden;
        background: #fff;
        .buy{
            margin: .266667rem;
            color: #999;
            display: flex;/**弹性布局 */
            border-bottom: 1px solid #ddd8ce;
            .price{
                flex: 1;
                font-size: .4rem;
                & span:nth-of-type(1){
                    font-size: .88rem;
                    color: #06c1ae;
                }
                & span:nth-of-type(2){
                    color: #06c1ae;
                }
            }
            .buy-btn{
                height: 1.066667rem;
                width: 2.666667rem;
                background: #ef8416;
                color: #fff;
                font-size: .533333rem;
                text-align: center;
                line-height:  1.066667rem;
                margin-bottom: 0.2667rem;
                border-radius: .133333rem;
            }
        }
        .server{
            padding:.373333rem .266667rem;
            ul{
                display: flex;/**弹性布局 */
                flex-wrap: wrap;/**超出后自动换行 */
                li{
                    width: 50%;
                    list-style: none;
                    height: .746667rem;
                    line-height: .746667rem;
                    i{
                        font-size: .533333rem;
                        vertical-align: middle;
                    }
                    /*选中第一个li*/
                    &:nth-of-type(1),&:nth-of-type(2){
                        color: #6bbd00;
                    }
                    &:nth-of-type(3){
                        color: #666;
                    }
                    /*选中第一个li下的i图标*/
                    &:nth-of-type(1) i{
                        font-size: .613333rem;
                    }
                }
            }
        }
        .store-message{
            padding:0 .266667rem;
            .top{
                line-height: 1.173333rem;
                height: 1.173333rem;
                border-bottom: 1px solid #ddd8ce;
                font-size: 36px;
            }
            .bottom{
                display: flex;/**弹性布局 */
                padding: .373333rem 0;
                .message-left{
                    flex: 1;
                    & div:nth-of-type(1){
                        font-size: .426667rem;
                        color: #000;
                        margin-bottom: .08rem;
                        font-weight: 900;
                    }
                    & div:nth-of-type(2){
                        line-height: 2;
                        color: #666;
                    }
                    & div:nth-of-type(3){
                        i{
                            font-size: .373333rem;
                            color: #666;
                            vertical-align: middle;
                        }
                        span{
                            color: #ed8706;
                            margin-left: .506667rem;
                        }
                    }
                }
                .message-right{
                    width: 1.866667rem;
                    display: flex;/**弹性布局 */
                    /**
                        flex弹性布局：容器wrap和元素item，
                        所有元素既可以是容器，也可以是元素item
                    */
                    justify-content: center;/**水平方向对齐 */
                    align-items: center;/**垂直方向对齐 */
                    color: #06c1ae;
                    position: relative;
                    i{
                        font-size: .506667rem;
                    }
                    &::after{
                            content: '';
                            display: block;
                            position: absolute;
                            left: 0;
                            top: 0px;
                            height: 100%;
                            width: 1px;
                            background: #ddd8ce;
                    }
                }
            }
        }
    }
    
</style>